<template>
	<view class="container">
		<view class="reportUser">
			<view class="titleContainer">
				<text class="title">匿名举报查询</text>
			</view>
			<view class="userForm">
				<u--form
					:model="form" 
					ref="uForm"
					:rules="rules"
					labelWidth="78px"
				>
				<u-form-item
					label="举报编号" 
					borderBottom
					prop="reportNumber"
					required
				>
					<u-input v-model="form.reportNumber" placeholder="请输入举报编号" customStyle="width:1000px"   border="none"></u-input>
				</u-form-item>
				<u-form-item
					label="验证码"
					borderBottom
					prop="code"
					required
				>
					<u-input v-model="form.code" placeholder="请输入验证码"  border="none">
						<template slot="suffix">
							<u--image 
								:showLoading="true" 
								:src="src" 
								width="99px" 
								height="27px" 
								@click="click"
						    >
							</u--image>
						</template>
					</u-input>
				</u-form-item>
				</u--form>
				<u-button type="primary" size="large" text="匿名举报查询" @click="submit"></u-button>
				<u-button type="info" style="background-color: lightgrey;margin-top: 0.5em;" size="large" text="点击实名举报查询" @click="select"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:'#24A7FE',
				src:'',
				tips: '',	
				form:{
					code:'',
					key:'',
					phone:'',
					reportNumber:'',
					vType:2 //匿名
				},
				rules:{
					reportNumber:[
						{
							required: true,
							message: '请输入举报编号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur'
						}
					],
					code:[
						{
							required: true,
							message: '请输入验证码',
							trigger: ['change','blur']
						},
						{
							type:'number',
							message:'验证码必须为右图中计算数值结果',
							trigger:['change','blur']
						}
					]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getGraphic()
		},
		onShow() {
			console.log('Index page show');
			this.getGraphic()
		},
		methods:{
			async getGraphic(){
				const res = await this.$api.verificatonCode.graphicVerificationCode()
				console.log(res);
				if(res.data.success===true){
					this.src=res.data.data.codeUrl
					this.form.key=res.data.data.key
				}
				console.log(this.src);
				console.log(this.form.key);
			},
			click(){
				this.getGraphic()
			},
		    submit(){
				this.$refs.uForm.validate().then(res=>{
					this.$api.select.selectOrder(this.form).then(res=>{
						console.log(res);
						if(res.data.success===true){
							let tempObj = res.data.data[0] //为详情对象
							let item = JSON.stringify(tempObj)
							uni.setStorageSync('reportInfo',item)
							uni.navigateTo({
								url:'/pages/detailAnonymous/detailAnonymous'
							})
						}
					})
				})
		    },
		    select(){
			    uni.switchTab({
			  	  url:'/pages/select/select'
			    })
		  }
		}
	}
</script>

<style scoped lang="scss">
.container{
		*{
			margin-bottom: 10rpx;
		}
		.reportUser{
			// margin-top: 47px;
			.titleContainer{
				border-bottom: 1px solid lightgrey;
				padding-bottom: 7px;
				margin: 7px 18px;
				.title{
					font-weight: bold;
					width: 96px;
					height: 33px;
					color: rgba(16, 16, 16, 1);
					font-size: 24px;
					text-align: left;
					font-family: PingFangSC-regular;
				}
			}
			.userForm{
				margin: 7px 18px;
			}
		}
		
	}
</style>

